<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		canvas {border: 1px solid black;}
	</style>
	<body>
		<canvas id="canvasq" width="1000" height="1000"></canvas>
		<img id="img" src="cut.jpeg" style="display: none;"/>
		
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let ocan=document.getElementById('canvasq');
			let ppen=ocan.getContext('2d');
			
			
//				 oImg=document.getElementById('img');
//				// ppen.drawImage(oImg,500,0);
//					console.log(oImg.width);
//					console.log(oImg.height);
//				 //672,508
				 let img2=new Image();
				 img2.src='icon.png';
				 img2.onload=function (){
				 	let mPartten=ppen.createPattern(img2,'repeat');
				 	ppen.fillStyle=mPartten;
				 	ppen.fillRect(0,0,800,800);
				 }

//				img2.onload=function(){
//					var text='啊啊啊啊';
//					ppen.font="blod 30px ";
//					var pattern=ppen.createPattern(img2,'no-repeat');
//					ppen.fillStyle=pattern;
//					ppen.fillText(text,10,50);
//				}
				 
				
//				let myCanvas=document.createElement('canvas');
//				myCanvas.width=60;
//				myCanvas.height=60;
//				console.log(myCanvas);
//				let cPen=myCanvas.getContext('2d');
//				cPen.arc(30,30,30,0,Math.PI/180*180,true);
//				cPen.fillStyle='green';
//				cPen.fill();
//				
//				let cPartten=ppen.createPattern(myCanvas,'repeat');
//				ppen.fillStyle=cPartten;
//				ppen.fillRect(0,0,500,500);
				
			
				
				
				

//				 function createImg(imgSrc){
//				 	let img=new Image();
//				 	img.src=imgSrc;
//				 	img.onload=function(){
//				 		ppen.drawImage(img,0,0);
//				 	}
//				 }
//				
//				createImg('cut.jpeg');
					
					
					
					
					
		}
	</script>
</html>
